<template>
  <!--8.29改版首页-->
  <!--<el-row class="main" :style="`background-image:url(${LOGIN_IMG_URL}/${bgstyle.backgroundImage})`">-->
  <el-row class="main" style="background: url('../../../static/img/login.png') no-repeat; background-size: cover">
    <img src="../../../static/img/cbi-logo.png" alt="">
    <div class="rightBar">
      <div class="lang">
        <span class="english" :class="{isLangActive: language === 'en'}" @click="changeEn">EN</span> /
        <span class="chinese" :class="{isLangActive: language === 'zh'}" @click="changeCh">中文</span>
      </div>
      <div class="login">
        <el-row :gutter="0">
          <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
            <!--<img class="hat" :src="hatImage" alt="">-->
            <!--<img class="man" :src="manImage" alt="">-->
            <!--<img :src="flowerImage" alt="" class="flower">-->
            <div class="login-form">
              <span>{{$t('login.title')}}</span>
              <div class="card-block">
                <!--<span>CBI</span>-->
                <el-form autoComplete="on" :model="loginForm" ref="loginForm" label-position="left"
                         label-width="0px"
                         class="card-box login-form">
                  <el-form-item prop="username">
                    <el-input @focus="clearTips" name="username" type="text" v-model="loginForm.username"
                              autoComplete="on"
                              placeholder="ITcode" class="username">
                      <!--<template slot="prepend">-->
                      <!--<i class="iconfont icon-email"></i>-->
                      <!--</template>-->
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input @focus="clearTips" name="password" type="password" @keypress.native="detectCapsLock"
                              @keyup.native="isCaps"
                              v-model="loginForm.password"
                              autoComplete="on"
                              :placeholder="$t('login.password')" class="password">
                      <!--<template slot="prepend">-->
                      <!--<i class="iconfont icon-email"></i>-->
                      <!--</template>-->
                    </el-input>
                  </el-form-item>
                  <el-alert
                    v-show="capsLock"
                    title="大写锁定已打开"
                    type="warning"
                    :closable="false">
                  </el-alert>
                  <el-form-item>
                    <el-button type="danger" style="width:100%;" :loading="loading" @click="loadPage()"
                               @click.native.prevent="login('loginForm')">
                      <span style="font-size:18px;font-family: MicorsoftYaHei">{{$t('login.login')}}</span>
                    </el-button>
                  </el-form-item>
                  <div style="margin-top: 10px;width: 100%">
                    <span style="color: red;font-size: 20px">{{errMsg}}</span>
                  </div>
                </el-form>
              </div>
            </div>
          </el-col>
          <!--<el-col :span="24" :xs="11" :sm="11" :md="11" :lg="11">-->
          <!--<div class="login-register">-->
          <!--<div class="card-block">-->
          <!--<el-button type="info" class="btn btn-primary active m-t-1"> 马上注册</el-button>-->
          <!--</div>-->
          <!--</div>-->
          <!--</el-col>-->
        </el-row>
        <el-row>
          <el-col :sapn="24">
            <div class="bottomIcons">
              <div class="grant-permission">
                <!--<a href="http://itsupport.lenovo.com:8080/arsys/shared/login.jsp?" target="_blank">-->
                <div class="grant-permission botm-font" @click="toPage('/guide')">
                  <!-- <i class="iconfont icon-xinxirenzheng"></i> -->
                  <!--<img src="../../../static/img/quanX.png" height="43" width="43">-->
                  <i class="iconfont icon-quanxianguanli1"></i>
                  <div style="margin-left: -5px;">{{$t('login.authorization')}}</div>
                </div>
                <!--</a>-->
                <!--<div @click="toGuide" class="toQuanXi">{{$t('login.guidelines')}}</div>-->
              </div>
              <a href="#/CBIAPI/index" target="_blank" style=" margin-left: 15px;position: relative;top: 5px;">
                <div class="cbi-api">
                  <i class="iconfont icon-APIAccessProcess1" style="color:#ff6666;"></i>
                  <div>{{$t('login.CBIAPI')}}</div>
                </div>
              </a>
              <div class="about-us botm-font" @click="toPage('/aboutus')">
                <!-- <i class="iconfont icon-guanyuwomen1"></i> -->
                <!--<img src="../../../static/img/aboutUs.png" height="43" width="43" alt="">-->
                <i class="iconfont icon-guanyuwomen3"></i>
                <div>{{$t('login.aboutus')}}</div>
              </div>
              <div class="faq botm-font" @click="toPage('/faq')">
                <!-- <i class="iconfont icon-wenda1"></i> -->
                <!--<img src="../../../static/img/faq.png" height="43" width="43" alt="">-->
                <i class="iconfont icon-QA1"></i>
                <div style="margin-left: 4px;">{{$t('login.faq')}}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="loginTips">{{$t('route.loginTips')}}</div>
    </div>
  </el-row>
</template>

<script>
  import {
    setToken,
    getToken,
    setUsername,
    getUsername,
    setQlikTicket,
    getQlikTicket,
    setoverview,
    setUrl,
    randomData
  } from '../../utils/auth.js'
  import {mapGetters} from "vuex";
  import Cookies from 'js-cookie'
  //  import * as types from '../../store/types'

  export default {
    data() {
      let random = randomData(2)
      return {
        loginForm: {
          username: getUsername() || '',
          password: ''
        },
        LOGIN_IMG_URL: process.env.LOGIN_IMG_URL,
        loading: false,
        errMsg: '',
        random: random,
        capsLock: false,
        capital: false, // 大写锁定是否被按下过,
        bgstyle: { // 随机选择背景图样式
          // backgroundImage: require('./login_images/bg' + Math.ceil(Math.random() * 5) + '.jpg')
          backgroundImage: ''
        },
//        hatImage: require('./login_images/chrhat' + random + '.png'),
//        manImage: require('./login_images/chrman' + random + '.png'),
//        flowerImage: require('./login_images/chrflower' + random + '.png'),
      }
    },
    methods: {
      login(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('LoginByUsername', this.loginForm).then((res) => {
              this.loading = false
              if (res.data.status === 400) {
                // _this.errMsg = 'This account is not available.'
                _this.errMsg = 'Log in abnormal'
                _this.loading = false
              }
              if (res.data.status === 402) {
                _this.errMsg = 'Username or password is not correct'
                _this.loading = false
              }
              if (res.data.status === 403) {
                _this.errMsg = 'This account is not available'
                _this.loading = false
              }
              if (res.data.status === 415) {
                _this.errMsg = 'Please enter the ITcode or password'
                _this.loading = false
              }
              if (res.data.status === 411) {
                _this.errMsg = 'Connection to server timed out. Please try again '
                _this.loading = false
              }
              this.$router.push({path: '/'})
            }).catch(() => {
              this.loading = false
            })
//            return new Promise((resolve, reject) => {
//              this.loading = true
//              const _this = this
//              this.axios.post('/user/login.do', {
//                username: _this.loginForm.username,
//                password: _this.loginForm.password
//              }).then(function (res) {
//                if (res.data.status === 402) {
//                  _this.errMsg = 'Invalid username or password'
//                  _this.loading = false
//                }
//                if (res.data.status === 403) {
//                  _this.errMsg = 'This account is not available.'
//                  _this.loading = false
//                }
//                if (res.data.status === 415) {
//                  _this.errMsg = 'Please enter the username or password '
//                  _this.loading = false
//                }
//                _this.loading = false
//                _this.$dispath
//                _this.$store.commit(types.LOGIN, res.data.data.token)
//                _this.$store.commit(types.USERNAME, _this.loginForm.username)
//                _this.$store.commit(types.QLIKTICKET, res.data.data.qlikTicket)
//                _this.$router.push('/')
//              })
//            }).then(() => {
//              location.reload()  // 为了重新实例化vue-router对象 避免bug
//            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
        // 为了让loadCheckUser接口带上token，所以延迟执行。
        // setTimeout(function() {
        //   _this.loadCheckUser()
        // },1000)
      },
      loadCheckUser() {
        this.axios.get(`https://codata.cbi.lenovo.com/check_user?user=${this.loginForm.username}`).then(res => {
          sessionStorage.setItem('checkUser', res.data.data.result)
        })
      },
      async loadBackground() {
        let res = await this.axios.get('/backgroundImg/randomImg')
        let data = res.data.data
        this.bgstyle.backgroundImage = data.src
      },
      // 切换中英文
      changeCh() {
        this.lang = "zh";
        this.$i18n.locale = this.lang;
        this.$store.dispatch('setLanguage', this.lang)
      },
      changeEn() {
        this.lang = "en";
        this.$i18n.locale = this.lang;
        this.$store.dispatch('setLanguage', this.lang)
      },
      detectCapsLock(event) {
        if (this.capital) {
          return
        }
        var e = event || window.event;
        var keyCode = e.keyCode || e.which;
        var isShift = e.shiftKey || (keyCode === 16) || false;
        if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {
          this.capsLock = true
          this.capital = true
        } else {
          this.capsLock = false
        }
      },
      isCaps(event) {
        var e = event || window.event
        if (e.keyCode === 13) {
          this.login('loginForm')
        }
        if (e.keyCode === 20 && this.capital) {
          this.capsLock = !this.capsLock
          return false
        }
      },
      clearTips() {
        this.errMsg = ''
      },
      toPage(link) {
        this.$router.push(link)
      },
      toAboutUs() {
        this.$router.push('/aboutus')
      },
      toFAQ() {
        this.$router.push('/faq')
      },
      toGuide() {
        this.$router.push('/guide')
      },
      toCBIAPI() {
        this.$router.push('/CBIAPI')
      },
      // 数据采集
      loadPage() {
        Avatar.push([
          "track",
          [
            "category",
            "loginSuccess",
            "label",
            {
              url: window.location,
              username:getUsername(),
            },
            2
          ]
        ]);
      }
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'name',
        'avatar',
        'language'
      ])
    },
    mounted() {
      this.loadBackground()
      setoverview('overview')
      setUrl(window.location)
    }
//    mounted() {
//      function isIE() {
//        if (!!window.ActiveXObject || "ActiveXObject" in window) {
//          return true;
//        }
//        else {
//          return false;
//        }
//      }
//
//      (function () {
//        var inputPWD = document.getElementById('loginPasswd');
//        var capital = false;
//        var capitalTip = {
//          elem: document.getElementById('capital'),
//          toggle: function (s) {
//            var sy = this.elem.style;
//            var d = sy.display;
//            if (s) {
//              sy.display = s;
//            }
//            else {
//              sy.display = d == 'none' ? '' : 'none';
//            }
//          }
//        }
//        var detectCapsLock = function (event) {
//          if (capital) {
//            return
//          }
//          var e = event || window.event;
//          var keyCode = e.keyCode || e.which;
//          var isShift = e.shiftKey || (keyCode === 16) || false;
//          if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {
//            capitalTip.toggle('block');
//            capital = true
//          } else {
//            capitalTip.toggle('none');
//          }
//        }
//        if (!isIE()) {
//          inputPWD.onkeypress = detectCapsLock;
//          inputPWD.onkeyup = function (event) {
//            var e = event || window.event
//            if (e.keyCode === 20 && capital) {
//              capitalTip.toggle()
//              return false
//            }
//          }
//        }
//      })()
//    }
  }
</script>

<style lang="scss" scoped>
  .main {
    position: relative;
    min-width: 1000px;
    width: 100vw;
    height: 100vh;
    text-align: center;
    /*background: url("login_images/bg2.jpg") no-repeat;*/
    background-size: cover;
    img {
      width: 300px;
      position: fixed;
      top: 10px;
      left: 10px;
    }

    .rightBar{
      width: 482px;
      height: 100%;
      background-color: rgba(255,255,255,0.35);
      position: fixed;
      z-index: 1;
      right: 0;
      top: 0;
      .lang {
        font-size: 16px;
        float: right;
        position: fixed;
        top: 20px;
        right: 60px;
        color: white;
        font-weight: bold;
        .english {
          cursor: pointer;
          color: #939cad;
        }
        .chinese {
          cursor: pointer;
          color: #939cad;
        }
        .isLangActive {
          color: #409EFF;
        }
      }
      .login {
        /*min-width: 25%;*/
        width: 384px;
        height:408px;
        /*position: relative;*/
        position: absolute;
        /*top: 92px;*/
        /*margin-top: 190px;*/
        margin-top: 25vh;
        right:7%;
        /*<!--transform: translateY(-50%);-->*/
        /*border-radius:5px;*/
        /*margin-top: 10vh;*/
        /*box-shadow: -8px 8px 20px #555;*/
        /*box-shadow: 3px 3px 12px #e0e2e9;*/
        .login-form {
          text-align: center;
          span{
            color: #fefefe;
            font-size: 24px;
            font-family: MicorsoftYaHei;
          }
          .el-button--primary{
            background:linear-gradient(to right, #5965c6 , #3d96c7);
          }
          .card-block{
            padding:0 53.5px 0;
            margin-top: 20px;
          }

        }
        .login-register {
          height: 48vh;
          background: yellow;
          background-image: url("./login_images/login_bg.png");
          background-size: 100% 100%;
        }
        .bottomIcons {
          /*overflow: hidden;*/
          position: absolute;
          display: flex;
          justify-content:center;
          /*margin: 0 auto;*/
          /*margin-top: 25vh;*/
          /*bottom: 5vh;*/
          width: 100%;
          bottom: -100px;
          left: -10px;
          /*margin-left: 85px;*/
          /*left: 50%;*/
          /*<!--transform: translateX(-154px);-->*/
          color:#959eaf;
          /*width: 33.333vw;*/
          .botm-font{
            color: #fff;
            &:hover {
              color: #ff5b00!important;
            }
          }
          .grant-permission, .about-us, .faq ,.cbi-api{
            /*background: red;*/
            display: inline-block;
            /*width: 11.111vw;*/
            /*width: 7vw;*/
            /*width: 9vw;*/
            cursor: pointer;
            bottom: 5vh;
            float: left;
            /*color: #fff;*/
            &:hover {
              color: #409EFF;
            }
            i {
              font-size: 45px;
            }
          }
          .grant-permission{
            margin-left: 12px;
            width: 80.03px;
          }
          .about-us{
            /*margin:0 30px 0 40px;*/
            margin: 0 15px;
          }
          .cbi-api{
            color: #fff;
            i{
              display: inherit;
              margin-bottom:10px;
              font-size: 32px;
              color:#fff !important;
            }
          }
          .cbi-api:hover{
            color: #ff5b00!important;
            i{
              color:#ff5b00!important;
            }
          }
        }
        .loginTips{
          position: absolute;
          right: 62px;
          bottom: 20px;
          color: #ff5b00;
          font-family: MicorsoftYaHei;
          font-size:12px;
        }
      }
      .bottomIcons {
        /*overflow: hidden;*/
        position: absolute;
        display: flex;
        justify-content:center;
        /*margin: 0 auto;*/
        /*margin-top: 25vh;*/
        /*bottom: 5vh;*/
        width: 100%;
        bottom: 191px;
        /*margin-left: 85px;*/
        /*left: 50%;*/
        /*<!--transform: translateX(-154px);-->*/
        color:#959eaf;
        /*width: 33.333vw;*/
        .botm-font{
          color: #fff;
          &:hover {
            color: #ff5b00!important;
          }
        }
        .grant-permission, .about-us, .faq {
          /*background: red;*/
          display: inline-block;
          /*width: 11.111vw;*/
          /*width: 7vw;*/
          /*width: 9vw;*/
          cursor: pointer;
          bottom: 5vh;
          float: left;
          /*color: #fff;*/
          &:hover {
            color: #409EFF;
          }
          i {
            font-size: 45px;
          }
        }
        .grant-permission{
          margin-left: 12px;
          width: 80.03px;
        }
        .about-us{
          margin:0 30px 0 40px;
        }
      }
      .loginTips{
        position: absolute;
        right: 62px;
        bottom: 20px;
        color: #fff;
        font-family: MicorsoftYaHei;
        font-size:12px;
      }
    }
  }

  .hat {
    width: 250px;
    z-index: 9999999;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translateY(-130%);
  }

  .man {
    position: fixed;
    top: 50%;
    left: -70%;
    transform: translateY(-10%);
  }

  .flower {
    z-index: 9999999;
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
  }



  /*.grant-permission, .about-us, .faq, .toQuanXi {*/

  .icon-xinxirenzheng{
    color: #5ede9e;
  }
  .icon-guizeshuoming{
    color: #62affd;
  }
  .icon-guanyuwomen1 {
    color: #ff9ddd;
  }
  .icon-wenda1{
    color: #c77ef4;
  }

  /*.about-us {*/
  /*margin: 0 auto;*/
  /*}*/

</style>

<!--<template>-->
<!--<div class="login-container">-->
<!--<el-form autoComplete="on" :model="loginForm" ref="loginForm" label-position="left"-->
<!--label-width="0px"-->
<!--class="card-box login-form">-->
<!--<h3 class="title">CBI 系统登录</h3>-->
<!--<el-form-item prop="username" :rules="[{ required: true, message: '用户名不能为空'}]">-->
<!--<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名"/>-->
<!--</el-form-item>-->
<!--<el-form-item prop="password" :rules="[{ required: true, message: '密码不能为空'}]">-->
<!--<el-input name="password" type="password" @keypress.native="detectCapsLock" @keyup.native="isCaps"-->
<!--v-model="loginForm.password"-->
<!--autoComplete="on"-->
<!--placeholder="密码"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item>-->
<!--<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="login('loginForm')">-->
<!--登录-->
<!--</el-button>-->
<!--</el-form-item>-->
<!--<el-alert-->
<!--v-show="capsLock"-->
<!--title="大写锁定已打开"-->
<!--type="warning"-->
<!--:closable="false">-->
<!--</el-alert>-->
<!--</el-form>-->
<!--</div>-->
<!--</template>-->

<!--<script>-->
<!--import {setToken, getToken, setUsername, getUsername, setQlikTicket, getQlikTicket} from '../../utils/auth.js'-->
<!--import * as types from '../../store/types'-->

<!--export default {-->
<!--data() {-->
<!--return {-->
<!--loginForm: {-->
<!--username: '',-->
<!--password: ''-->
<!--},-->
<!--loading: false,-->
<!--capsLock: false,-->
<!--capital: false // 大写锁定是否被按下过-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--login(formName) {-->
<!--this.$refs[formName].validate((valid) => {-->
<!--if (valid) {-->
<!--return new Promise((resolve, reject) => {-->
<!--this.loading = true-->
<!--const _this = this-->
<!--this.axios.post('/user/login.do', {-->
<!--username: _this.loginForm.username,-->
<!--password: _this.loginForm.password-->
<!--}).then(function (res) {-->
<!--console.log(res)-->
<!--_this.loading = false-->
<!--_this.$store.commit(types.LOGIN, res.data.data.token)-->
<!--_this.$store.commit(types.USERNAME, _this.loginForm.username)-->
<!--_this.$store.commit(types.QLIKTICKET, res.data.data.qlikTicket)-->
<!--_this.$router.push('/')-->
<!--})-->
<!--}).then(() => {-->
<!--location.reload()  // 为了重新实例化vue-router对象 避免bug-->
<!--})-->
<!--} else {-->
<!--console.log('error submit!!')-->
<!--return false-->
<!--}-->
<!--})-->
<!--},-->
<!--detectCapsLock(event) {-->
<!--if (this.capital) {-->
<!--return-->
<!--}-->
<!--var e = event || window.event;-->
<!--var keyCode = e.keyCode || e.which;-->
<!--var isShift = e.shiftKey || (keyCode === 16) || false;-->
<!--if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {-->
<!--console.log('大写打开')-->
<!--this.capsLock = true-->
<!--this.capital = true-->
<!--} else {-->
<!--this.capsLock = false-->
<!--}-->
<!--},-->
<!--isCaps(event) {-->
<!--var e = event || window.event-->
<!--if (e.keyCode === 13) {-->
<!--this.login('loginForm')-->
<!--}-->
<!--if (e.keyCode === 20 && this.capital) {-->
<!--this.capsLock = !this.capsLock-->
<!--return false-->
<!--}-->
<!--}-->
<!--},-->
<!--//    mounted() {-->
<!--//      function isIE() {-->
<!--//        if (!!window.ActiveXObject || "ActiveXObject" in window) {-->
<!--//          return true;-->
<!--//        }-->
<!--//        else {-->
<!--//          return false;-->
<!--//        }-->
<!--//      }-->
<!--//-->
<!--//      (function () {-->
<!--//        var inputPWD = document.getElementById('loginPasswd');-->
<!--//        var capital = false;-->
<!--//        var capitalTip = {-->
<!--//          elem: document.getElementById('capital'),-->
<!--//          toggle: function (s) {-->
<!--//            var sy = this.elem.style;-->
<!--//            var d = sy.display;-->
<!--//            if (s) {-->
<!--//              sy.display = s;-->
<!--//            }-->
<!--//            else {-->
<!--//              sy.display = d == 'none' ? '' : 'none';-->
<!--//            }-->
<!--//          }-->
<!--//        }-->
<!--//        var detectCapsLock = function (event) {-->
<!--//          if (capital) {-->
<!--//            return-->
<!--//          }-->
<!--//          var e = event || window.event;-->
<!--//          var keyCode = e.keyCode || e.which;-->
<!--//          var isShift = e.shiftKey || (keyCode === 16) || false;-->
<!--//          if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {-->
<!--//            capitalTip.toggle('block');-->
<!--//            capital = true-->
<!--//          } else {-->
<!--//            capitalTip.toggle('none');-->
<!--//          }-->
<!--//        }-->
<!--//        if (!isIE()) {-->
<!--//          inputPWD.onkeypress = detectCapsLock;-->
<!--//          inputPWD.onkeyup = function (event) {-->
<!--//            var e = event || window.event-->
<!--//            if (e.keyCode === 20 && capital) {-->
<!--//              capitalTip.toggle()-->
<!--//              return false-->
<!--//            }-->
<!--//          }-->
<!--//        }-->
<!--//      })()-->
<!--//    }-->
<!--}-->
<!--</script>-->

<!--<style rel="stylesheet/scss" lang="scss">-->
<!--@import "src/styles/mixin.scss";-->

<!--$bg: #2d3a4b;-->
<!--$dark_gray: #889aa4;-->
<!--$light_gray: #eee;-->

<!--.login-container {-->
<!--@include relative;-->
<!--height: 100vh;-->
<!--background-color: $bg;-->
<!--input:-webkit-autofill {-->
<!-- -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;-->
<!-- -webkit-text-fill-color: #fff !important;-->
<!--}-->
<!--input {-->
<!--background: transparent;-->
<!--border: 0px;-->
<!-- -webkit-appearance: none;-->
<!--border-radius: 0px;-->
<!--padding: 12px 5px 12px 15px;-->
<!--color: $light_gray;-->
<!--height: 47px;-->
<!--}-->
<!--.el-input {-->
<!--display: inline-block;-->
<!--height: 47px;-->
<!--width: 85%;-->
<!--}-->
<!--.tips {-->
<!--font-size: 14px;-->
<!--color: #fff;-->
<!--margin-bottom: 10px;-->
<!--}-->
<!--.svg-container {-->
<!--padding: 6px 5px 6px 15px;-->
<!--color: $dark_gray;-->
<!--vertical-align: middle;-->
<!--width: 30px;-->
<!--display: inline-block;-->
<!--&_login {-->
<!--font-size: 20px;-->
<!--}-->
<!--}-->
<!--.title {-->
<!--font-size: 26px;-->
<!--font-weight: 400;-->
<!--color: $light_gray;-->
<!--margin: 0px auto 40px auto;-->
<!--text-align: center;-->
<!--font-weight: bold;-->
<!--}-->
<!--.login-form {-->
<!--position: absolute;-->
<!--left: 0;-->
<!--right: 0;-->
<!--width: 400px;-->
<!--padding: 35px 35px 15px 35px;-->
<!--margin: 120px auto;-->
<!--}-->
<!--.el-form-item {-->
<!--border: 1px solid rgba(255, 255, 255, 0.1);-->
<!--background: rgba(0, 0, 0, 0.1);-->
<!--border-radius: 5px;-->
<!--color: #454545;-->
<!--}-->
<!--.show-pwd {-->
<!--position: absolute;-->
<!--right: 10px;-->
<!--top: 7px;-->
<!--font-size: 16px;-->
<!--color: $dark_gray;-->
<!--cursor: pointer;-->
<!--}-->
<!--.thirdparty-button {-->
<!--position: absolute;-->
<!--right: 35px;-->
<!--bottom: 28px;-->
<!--}-->
<!--}-->
<!--</style>-->
